<template>
    <view class="page">
        <view class="input-title ">
            <text>任务名称：</text>
            <template>
                <template>{{task.name}}</template>
            </template>
        </view>
        <view class="input-title ">
            <text>任务发起部门/人：</text>
            <template>
                <template>{{task.user.name}}</template>
            </template>
        </view>
        <view class="input-title ">
            <text>任务落实部门/人：</text>
            <template>
                
                <button class="cu-btn round sm" @click="tixing">
                    <text class="cuIcon-notice text-red "></text>
                    提醒他催办</button>
                    <template>{{task.executive_user.name}}</template>
            </template>
        </view>
        
        <view class="input-title ">
            <text>任务状态：</text>
            <template>
                <template>{{task.state=="创建"?'进行中':task.state}}</template>
            </template>
        </view>
        
        <view class="input-title">
            <text>落实情况：</text>
        </view>
        <template v-for="action  in task.actions">
              
            <view class="input-body">
                 落实人{{task.executive_user.name}}
                 {{action.updated_at}} 提交:
                <textarea v-model="action.content" style="height: 300px;" class="input-textare" />
            </view>
        </template>
       
        
        
        
        <view class="uni-timeline">
            <view class="input-title">
                <text>任务落实记录：</text>
            </view>
            <view class="uni-timeline-item" :class="[
						index === 0 ? `text-${themeColor.name} uni-timeline-first-item` : '',
						index === approveDetail.length - 1 ? 'uni-timeline-last-item' : ''
					]" v-for="(item, index) in approveDetail" :key="index">
                <view class="uni-timeline-item-divider"></view>
                <view class="uni-timeline-item-content">
                    <view>
                        {{ item.approve }}
                    </view>
                    <view class="datetime">
                        {{item.name}} {{ item.suggest }} {{ item.time}}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    import {
        repair,
        workState,
        getRepairType
    } from '@/api/basic';
    import moment from '@/common/moment';

    export default {
        data() {
            return {
                repairDetail: {
                    "id": 4,
                    "merchant_id": 2,
                    "member_id": 69,
                    "cate_id": 1,
                    "content": "日常报修,2222",
                    "log": [{
                        "id": 68,
                        "time": 1602174818,
                        "action": "repair/approve",
                        "suggest": "好好好的",
                        "name": "系统管理员",
                        "approve": "审批"
                    }, {
                        "id": 69,
                        "time": 1602174760,
                        "action": "repair/audit",
                        "suggest": "好的",
                        "name": "古月",
                        "approve": "审核"
                    }, {
                        "id": 69,
                        "time": 1602174747,
                        "action": "repair/apply",
                        "suggest": "提交申请",
                        "name": "古月",
                        "approve": "申请"
                    }],
                    "remind": 0,
                    "sort": 0,
                    "state": "approve",
                    "status": "repair/approve",
                    "created_at": 1602174747,
                    "updated_at": 1602174818
                },
                approveDetail: [{
                    "id": 68,
                    "time": '2021-04-29 22:03',
                    "action": "repair/approve",
                    "suggest": "已提交落实情况",
                    "name": "古月",
                    "approve": "进行中"
                }, {
                    "id": 69,
                    "time": '2021-04-22 12:36',
                    "action": "repair/audit",
                    "suggest": "落实人为 古月",
                    "name": "办公室",
                    "approve": "指派任务"
                }, {
                    "id": 69,
                    "time": '2021-04-12 13:21',
                    "action": "repair/apply",
                    "suggest": "创建会议事项",
                    "name": "曹鹏飞",
                    "approve": "创建任务"
                }],
                imageList: [],
                id: '',
                loading: true,
                task:{},
            };
        },
        onLoad(event) {
            this.id = event.id
            console.log(event.id)
            this.initData(this.id)
        },
        onShow() {
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: this.themeColor.color,
                animation: {
                    duration: 400,
                    timingFunc: 'easeIn'
                }
            })
        },

        methods: {
            tixing(){
                this.$mHelper.toast('发送催办成功');
            },
            initData(id) {
                let user = uni.getStorageSync('user');
                let that = this;

                uni.request({
                    method: 'GET',
                    url: 'http://nmt.yunshangwulian.vip/api/tasks/' + id,
                    data: {
                        'api_token': user.api_token,
                        'task_id': id,
                        'location': that.location,
                        'user_id': user.id,
                        'type': 'text',
                        'content': that.content

                    },
                    header: {
                        'Accept': 'application/json' //自定义请求头信息
                    },
                    success: (res) => {
                        console.log(res)
                        if (res.statusCode == 200) {

                            that.task = res.data


                        } else {
                            this.$mHelper.toast('提交错误');
                        }

                    }
                });
            }
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $page-color-base;
    }

    .uni-timeline {
        padding: $spacing-lg;
        background-color: $color-white;
    }

    /*问题反馈*/
    .input-title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: $spacing-base;
        margin-top: $spacing-base;
        font-size: $font-base;

    }

    .input-body {
        background: $color-white;
        padding: $spacing-sm $spacing-base;
    }

    .input-textare {
        height: 200upx;
        font-size: 34upx;
        line-height: 50upx;
        width: 100%;
        box-sizing: border-box;
        padding: 20upx 30upx 0;
    }
</style>
